<script setup lang="ts">
import purpleImg from '@/assets/images/idc/design/purple.png';
import blueImg from '@/assets/images/idc/design/blue.png';
import orange_redImg from '@/assets/images/idc/design/orange_red.png';

interface AdvantageData {
  imgUrl: string;
  title: string;
  comment: string;
}
const advantageList: AdvantageData[] = [
  {
    imgUrl: purpleImg,
    title: '一手带宽',
    comment: '与全球多家主流通信运营商深入合作，拥有“大带宽”,性价比高。',
  },
  {
    imgUrl: blueImg,
    title: '全球布局',
    comment: '以广东辐射全国并扩散全球，在全球均有布点，可实现快速布局。',
  },
  {
    imgUrl: orange_redImg,
    title: '互联互通',
    comment: '全球机房专线互联，实现不同城市/国家快速布局，低延时传输。',
  },
];
</script>

<template>
  <div class="idc-advantage">
    <div class="container">
      <div class="advantageBody">
        <div
          class="box"
          v-for="item in advantageList"
          :key="item.title"
          :style="{ backgroundImage: `url(${item.imgUrl})` }"
        >
          <h4 class="title">{{ item.title }}</h4>
          <p class="comment">{{ item.comment }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.idc-advantage {
  width: 100%;
  padding-bottom: 140px;
  background-color: #f2f7f7;
  .advantageBody {
    margin-top: -160px;
    display: flex;
    justify-content: space-between;
    .box {
      width: 385px;
      height: 152px;
      background-size: auto;
      background-repeat: no-repeat;
      padding: 34px 15px 0px 130px;

      &:hover {
        border-radius: 11px;
        box-shadow: 4px 3px 18px 0px rgba(6, 2, 3, 0.2);
      }
      .title {
        font-family: 'SourceHanSansCN-Bold';
        font-size: 28px;
        line-height: 25px;
        color: #ffffff;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }
      .comment {
        font-family: 'SourceHanSansCN-Light';
        font-size: 16px;
        line-height: 30px;
        color: #fefdfe;
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 100%;
    .advantageBody {
      justify-content: space-evenly;
    }
  }
}

// 0px 至xl(1200px)
@media screen and (max-width: 1200px) {
  .idc-advantage {
    padding-bottom: 100px;
    .container {
      .advantageBody {
        justify-content: center;
        flex-wrap: wrap;
        .box {
          margin: 10px;
        }
      }
    }
  }
}
</style>
